<template>
  <div class="leftBox">
    <div class="userInfo">
      <img
        :src="userInfo.cPortrait"
        alt=""
        class="avatar"
      >
      <div class="info">
        <div class="name">
          {{ userInfo.cUserName || userInfo.cPhone }}
        </div>
        <div class="level">
          {{ userInfo.cMemberLevelName }}
        </div>
      </div>
    </div>
    <div class="list">
      <ul>
        <li
          v-for="item in barList"
          :key="item.id"
          @click="selectedIndex(item)"
        >
          <div :class="{ active: tabId == item.id }">
            {{ item.title }}
          </div>
          <ul>
            <li
              v-for="items in item.children"
              :key="items.id"
              :class="tabId == items.id ? 'active' : ''"
              @click.stop="selectedIndex(items)"
            >
              {{ items.title }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      tabId: 1,
      barList: [
        {
          title: "会员中心首页",
          path: "/person",
          id: 1,
          isActive: true,
          children: [],
        },
        {
          title: "我的消息",
          path: "/person/message",
          id: 2,
          isActive: false,
          children: [],
        },
        {
          title: "我的购物车",
          path: "/cart",
          id: 3,
          isActive: false,
          children: [],
        },
        {
          title: "订单中心",
          path: "/person/order",
          id: 4,
          isActive: false,
          children: [
            {
              title: "我的订单",
              path: "/person/order",
              id: 8,
              isActive: false,
              children: [],
            },
            {
              title: "我的退换货",
              path: "/person/returnList",
              id: 9,
              isActive: false,
              children: [],
            },
            {
              title: "我的评价",
              path: "/person/evaluate",
              id: 10,
              isActive: false,
              children: [],
            },
          ],
        },
        {
          title: "我的资产",
          path: "/person/assets",
          id: 5,
          isActive: false,
          children: [
            {
              title: "我的积分",
              path: "/person/score",
              id: 11,
              isActive: false,
              children: [],
            },
            {
              title: "我的卡券",
              path: "/person/card",
              id: 12,
              isActive: false,
              children: [],
            },
            {
              title: "我的储值卡",
              path: "/person/storecard",
              id: 13,
              isActive: false,
              children: [],
            },
            {
              title: "我的礼品卡",
              path: "/person/giftcard",
              id: 14,
              isActive: false,
              children: [],
            },
          ],
        },
        {
          title: "我的关注",
          path: "/person/focus",
          id: 6,
          isActive: false,
          children: [
            {
              title: "我的收藏",
              path: "/person/collect",
              id: 15,
              isActive: false,
              children: [],
            },
            {
              title: "我的足迹",
              path: "/person/track",
              id: 16,
              isActive: false,
              children: [],
            },
          ],
        },
        {
          title: "会员信息",
          path: "/person/info",
          id: 7,
          isActive: false,
          children: [
            {
              title: "个人信息",
              path: "/person/info",
              id: 17,
              isActive: false,
              children: [],
            },
            {
              title: "收货地址",
              path: "/person/address",
              id: 18,
              isActive: false,
              children: [],
            },
            {
              title: "安全中心",
              path: "/person/safecenter",
              id: 19,
              isActive: false,
              children: [],
            },
          ],
        },
      ],
      userInfo: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let paramse = {
        token:localStorage.getItem("token"),
        data : {}
      }
      this.$api.person.userInfo(paramse).then((res) => {
        // 执行某些操作
        if (res.code == 200) {
          this.userInfo = res.data;
        }
      });
    },
    selectedIndex(item) {
      this.$nextTick(() => {
        this.$router.push({
          path: item.path,
        });
        this.tabId = item.id;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.leftBox {
  width: 20.88rem;
  height: 84.03rem;
  background: #fff;
  margin-bottom: 1.6rem;
  .userInfo {
    width: 100%;
    height: 25.06rem;
    background: url(../../assets/img/personbg.png) no-repeat left top;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    text-align: center;

    .avatar {
      width: 12.5rem;
      height: 12.5rem;
      margin: 2.5rem auto 1.13rem auto;
    }

    .info {
      margin: 0 auto;

      .name {
        font-size: 1.4rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
      }

      .level {
        font-size: 1.2rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        margin-top: 1.5rem;
      }
    }
  }

  .list {
    padding: 3.25rem 0 3.25rem 2.88rem;

    li {
      cursor: pointer;

      div {
        font-size: 1.13rem;
        color: #000;
        position: relative;
        margin-bottom: 1.63rem;

        &.active {
          padding-bottom: 1.3rem;
          color: rgba(240, 64, 111, 1);

          &::after {
            width: 17.94rem;
            height: 0.06rem;
            background: rgba(240, 64, 111, 1);
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
      }

      > ul {
        li {
          font-size: 0.88rem;
          color: #666;
          position: relative;

          &.active {
            padding-bottom: 0.5rem;
            color: rgba(240, 64, 111, 1);

            &::after {
              width: 17.94rem;
              height: 0.06rem;
              background: rgba(240, 64, 111, 1);
              content: "";
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }
        }
      }

      margin-bottom: 1.63rem;
    }

    .title {
      font-size: 0.88rem;
      color: #666;
    }
  }
}
</style>
